<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/feilei.css" />
    <link rel="stylesheet" href="./css/base.css" />
  </head>
  <body>
    <header>
      <div class="nav">
        <p>全部分类</p>
      </div>
      <div class="wo">
        <div class="sun">
          <i class="iconfont icon-sousuo"></i>
          <a href="./搜索页.html">
            <input type="text" placeholder="搜索商品" />
          </a>
        </div>
      </div>
    </header>
    <div class="box">
      <div class="mask">
        <a
          v-for="(item,index) in list"
          @click="ragin(index)"
          :class="{pink:raginindex===index}"
        >
          <span>{{item.name}}</span>
        </a>
      </div>
      <div class="mian">
          <span v-for="(item,index) in tablist" class="edits" @click="add(item.name)">
            <img :src="item.image.preview_url" alt="" />
            <p>{{item.name}}</p>
          </span>
      </div>
    </div>
    <footer>
      <a href="./智慧商城首页.html">
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
      </a>
      <a href="./智慧商城分类.html">
        <i class="iconfont icon-fenlei"></i>
        <p>分类</p>
      </a>
      <a href="./购物车.html">
        <i class="iconfont icon-gouwuchekong"></i>
        <p>购物车</p>
      </a>
      <a href="./我的.html">
        <i class="iconfont icon-wode"></i>
        <p>我的</p>
      </a>
    </footer>
    <script src="./axios.js"></script>
    <script src="./vue.js"></script>
    <script src="./js/commit.js"></script>
    <script>
      const add = new Vue({
        el: '.box',
        data: {
          clsArr: 'pink',
          list: [],
          tablist: [],
          raginindex: 0
        },
        created() {
          this.getBooksList()
        },
        methods: {
          async getBooksList() {
            const arr = await axios.get(
              'category/list'
            )
            // console.log(JSON.stringify(arr.data))
            console.log(arr.data.data.list)
            this.list = arr.data.data.list
            this.tablist = this.list[0].children
          },
          ragin(index) {
            this.raginindex = index
            this.tablist = this.list[index].children
          },
          add(name){
            console.log(name)
            location.href = `./搜索列表.html?search=${name}`
          }
        }
      })
    </script>
  </body>
</html>
